<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能人脸比对系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <div class="upload-card">
            <!-- 帮助图标 -->
            <div class="help-icon-wrapper">
                <svg class="help-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span class="help-text">上传须知</span>
            </div>

            <h2 class="section-title">人脸比对系统</h2>

            <div class="upload-grid">
                <!-- 第一上传区域 -->
                <div class="upload-zone" id="dropzone-1">
                    <div class="upload-icon-wrapper">
                        <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
                        </svg>
                        <p class="upload-hint">点击或拖放图片上传</p>
                    </div>
                    <div class="preview-container">
                        <img class="preview-image" id="preview-1" alt="图片预览">
                    </div>
                    <input type="file" id="upload-1" class="visually-hidden" accept="image/*">
                    <div class="file-info" id="file-info-1"></div>
                </div>

                <!-- 第二上传区域 -->
                <div class="upload-zone" id="dropzone-2">
                    <div class="upload-icon-wrapper">
                        <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
                        </svg>
                        <p class="upload-hint">点击或拖放图片上传</p>
                    </div>
                    <div class="preview-container">
                        <img class="preview-image" id="preview-2" alt="图片预览">
                    </div>
                    <input type="file" id="upload-2" class="visually-hidden" accept="image/*">
                    <div class="file-info" id="file-info-2"></div>
                </div>
            </div>

            <!-- 操作按钮组 -->
            <div class="action-group">
                <button class="btn btn-primary" id="compare-btn">开始比对</button>
                <button class="btn btn-secondary" id="reset-btn">清空重置</button>
            </div>
        </div>
    </div>

    <!-- 上传须知模态框 -->
    <div class="modal-overlay" id="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h3>
                    <svg class="modal-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    </svg>
                    上传须知
                </h3>
                <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </div>
            <ul class="rule-list">
                <li class="rule-item">图片应清晰，分辨率不低于300x300像素，避免模糊</li>
                <li class="rule-item">单张图片大小不能超过5MB</li>
                <li class="rule-item">照片应为正面视角，使人脸与相机平行，减少角度失真</li>
                <li class="rule-item">确保良好的光照，让人脸轮廓和特征明显，无阴影遮挡关键区域</li>
                <li class="rule-item">使用单一颜色背景，以提高识别率，避免复杂背景干扰</li>
                <li class="rule-item">拍摄时保持自然表情，不做夸张的动作，以提升识别效果</li>
                <li class="rule-item">确保人脸无任何遮挡，如头发、帽子、眼镜或口罩等，避免影响识别</li>
                <li class="rule-item">每张图片仅包含一个人脸部信息，多人合照不利于验证</li>
                <li class="rule-item">文件格式推荐JPG、JPEG或PNG</li>
            </ul>
        </div>
    </div>

    <!-- Toast提示 -->
    <div class="toast" id="toast"></div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
